<template>
	<view class="detail_main">
		<view class="detail_main_container">
			<view class="uni-margin-wrap">
				<swiper class="swiper">
					<swiper-item>
						<image src="../../static/img/banner1.jpeg" mode="" @click="preview"></image>
					</swiper-item>
					<swiper-item>
						<image src="/static/img/banner2.jpeg" mode=""></image>
					</swiper-item>
					<swiper-item>
						<image src="../../static/img/baner.jpeg" mode=""></image>
					</swiper-item>
				</swiper>
			</view>
			<view class="detail_main_box">
				<view class="detail_main_box_header">
					<view class="list_item_text_tag">
						标签
					</view>
					<view class="detail_main_title">
						随便写点什么标题超级牛逼的标题很多很多
					</view>
				</view>
				<view class="detail_main_box_bottom">
					<view class="detail_main_box_bottom_num">
						6.66
					</view>
					<view class="detail_main_box_bottom_oldnum">
						8.88
					</view>
				</view>
				<view class="detail_main_box_btn">
					<view class="detail_main_box_btn_left">
						<view class="detail_main_box_btn_left_q">
							鲨鱼
						</view>
						<view class="detail_main_box_btn_left_an">
							辣椒
						</view>
					</view>
					<view class="detail_main_box_btn_mark">

					</view>
					<view class="detail_main_box_btn_left">
						<view class="detail_main_box_btn_left_q">
							鲨鱼
						</view>
						<view class="detail_main_box_btn_left_an">
							辣椒
						</view>
					</view>
				</view>
			</view>
			<view class="img_box">
				<view class="img_box_title">
					鲨鱼
				</view>
				<view class="img_box_list">
					<view class="img_box_item" v-for="item in 9">
						<image src="../../static/img/baner.jpeg" mode=""></image>
					</view>
				</view>
			</view>

			<view class="img_box detail_recommend">
				<view class="img_box_title">
					鲨鱼
				</view>
				<directionListVue></directionListVue>
			</view>
		</view>

		<view class="detail_footer">
			<uni-fav :checked="checked" @click="onClick" />
			<view class="detail_footer_btn">
				<uni-icons type="paperplane-filled" size="24"></uni-icons>
				联系鲨鱼
			</view>
		</view>

	</view>
</template>
<script setup>
	import directionListVue from '../list/directionList.vue';
	import {
		ref
	} from 'vue'
	const checked = ref(false)
	const onClick = () => {}
	const preview = () => {
		uni.previewImage({
			urls: [
				'https://ts1.cn.mm.bing.net/th?id=OIP-C.AIQ7W47ZpNMoFMxxImUGkwHaEK&w=333&h=187&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2'
			], // 需要预览的图片链接列表
		});
	}
</script>

<style lang="scss" scoped>
	.detail_main {
		display: flex;
		flex-direction: column;
		height: 100vh;

		:deep(.uni-fav) {
			width: 200rpx;
			height: 100%;
			background-color: #fff !important;

			.uni-icons {
				font-size: 26px !important;
			}

			.uni-fav-text {
				font-size: 18px !important;
			}
		}

		.detail_main_container {
			flex: 1;
			overflow: auto;
		}

		.detail_footer {
			height: 100rpx;
			background: #fff;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.detail_footer_btn {
				height: 70%;
				line-height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 40px;
				background-color: pink;
				margin-right: 20rpx;
				padding: 10px;
				box-sizing: border-box;
				color: #333;
			}
		}

		.uni-margin-wrap {
			margin-top: 20rpx;
			border-radius: 10rpx;

			.swiper {
				height: 320rpx;
			}

			.swiper-item {
				border-radius: 10rpx;
			}

			image {
				width: inherit;
				height: 100%;
			}
		}

		.detail_main_box {
			background: #fff;
			padding: 20rpx;
			border-radius: 10px 10px 0 0;
			transform: translateY(-10px);

			.detail_main_box_header {
				display: flex;
				align-items: center;

				.list_item_text_tag {
					border-radius: 10px;
					background: pink;
					font-size: 18px;
					padding: 4px 6px;
					margin-right: 8px;
					flex: none;
					color: #fff;
				}

				.detail_main_title {
					font-size: 16px;
					font-weight: 600;
				}
			}

			.detail_main_box_bottom {
				display: flex;
				align-items: center;
				margin-top: 20rpx;

				.detail_main_box_bottom_num {
					color: pink;
					font-size: 24px !important;
					font-weight: 600;
				}

				.detail_main_box_bottom_oldnum {
					font-size: 16px;
					margin-left: 20rpx;
				}
			}

			.detail_main_box_btn {
				border-top: solid 1px #eee;
				margin-top: 20rpx;
				display: flex;
				align-items: center;

				.detail_main_box_btn_left {
					width: 50%;
					display: flex;
					align-items: cneter;
					justify-content: space-between;
					padding: 20rpx 0;
				}

				.detail_main_box_btn_mark {
					width: 1px;
					height: 40rpx;
					background: #eee;
					margin-left: 40rpx;
					margin-right: 40rpx;
				}

				.detail_main_box_btn_left_q {
					font-size: 14px;

				}

				.detail_main_box_btn_left_an {
					font-size: 12px;
					color: #999;
				}

			}


		}

		.img_box {
			background: #fff;
			border-radius: 10px;
			padding: 20rpx;

			.img_box_title {
				font-size: 16px;
				font-weight: 600;
				margin-bottom: 20rpx;

			}

			.img_box_list {
				display: flex;
				justify-content: space-between;
				align-items: center;
				flex-wrap: wrap;
				gap: 10rpx;
			}

			.img_box_item {
				width: calc(50% - 10rpx);
				height: 400rpx;
				margin-bottom: 10rpx;

				image {
					width: 100%;
					height: 400rpx;
					object-fit: cover;
				}
			}

			.img_box_list>.img_box_item:first-child {
				width: 100%;

				image {
					width: 100%;
					height: 400rpx;
					object-fit: cover;
				}
			}
		}

		.detail_recommend {
			margin-top: 20rpx;
		}
	}
</style>